<template>
    <div ref="videoElement" class="h-screen w-screen bg-black flex items-center justify-center" />
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { useTemplateRef, onMounted } from "vue";

const videoElement = useTemplateRef<HTMLVideoElement>("videoElement"); // 获取video元素引用
const { query } = useRoute();

onMounted(() => {
    const player = new EasyPlayerPro({
        container: videoElement.value,
        bufferTime: 0.2, // 缓存时长
        stretch: false,
        // MSE: true,
        // WASM: true,
        WCS: true,
        hasAudio: true
        // watermark: { text: { content: 'easyplayer-pro' }, right: 10, top: 10 },
    });

    const url = decodeURIComponent(query.url as string); // 获取url参数
    if (url) {
        player.play(url);
    }
});
</script>

<style>
.easyplayer-controls {
    display: none !important;
}
</style>